<style lang="less">
@import './login.less';
</style>

<template>
  <div class="login"
       :style="{'height': winH + 'px'}">
    <div class="login-code">
      <span>下载店务通APP-安卓版</span>
      <i class="iconsys iconicon-erweima"
         title="二维码"></i>
      <div class="login-code-img">
        <p>手机扫码下载</p>
        <div class="login-code-img-url"><img :src="codeUrl"></div>
      </div>
    </div>
    <div class="login-con">
      <Card icon="log-in"
            title="大玩家商户后台"
            :bordered="false">
        <div class="form-con">
          <login-form @on-success-valid="handleSubmit"></login-form>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
import LoginForm from '_c/login-form'
import { mapActions } from 'vuex'
import { hex_md5 } from '@/libs/md5'
export default {
  components: {
    LoginForm
  },
  data () {
    return {
      winH: '',
      codeUrl: require('@/assets/images/code.png')
    }
  },
  methods: {
    ...mapActions([
      'handleLogin',
      'getUserInfo'
    ]),
    handleSubmit ({ loginName, password }) {
      password = hex_md5(password)
      this.handleLogin({ loginName, password }).then(res => {
        if (res.status === 200) {
          this.getUserInfo().then(res => {
            if (res.status === 200) {
              this.$router.push({
                name: this.$config.homeName
              })
            } else {
              this.$Message.error(res.message)
            }
          })
        } else {
          this.$Message.error(res.message)
        }
      })
    }
  },
  mounted () {
    let _this = this
    this.winH = document.documentElement.clientHeight || document.body.clientHeight
    window.onresize = function () {
      _this.winH = document.documentElement.clientHeight || document.body.clientHeight
    }
  }
}
</script>
